<script setup lang="ts">
import type { SystemAccount, SystemAccountQuery } from '@/apis/system/accountApi'
import type { DataAction } from '@/components/DataForm/types'
import { FullScreen, Refresh } from '@element-plus/icons-vue'
import { reactive, ref } from 'vue'
import { CommonStates } from '@/apis/common/commonApi'
import { accountApi, AccountTypes } from '@/apis/system/accountApi'
import { useEditFormDrawer } from '@/components/DataForm/useEditFormDrawer'
import { useTable } from '@/components/DataPage/useTable'
import BaseCard from '@/layouts/BaseCard.vue'
import AccountAuthDialog from './AccountAuthDialog.vue'
import AccountPwdResetDialog from './AccountPwdResetDialog.vue'

const {
  openEditForm,
  EditFormDrawer,
} = useEditFormDrawer<SystemAccount>({
  editFields: [
    { name: 'appType', title: '应用类型', edit: data => data.id === undefined, require: true, dict: 'ENUM_APP_TYPE', editType: 'button' },
    { name: 'type', title: '账号类型', edit: data => data.id === undefined, require: true, options: [...AccountTypes], editType: 'button' },
    { name: 'username', title: '用户名', edit: data => data.id === undefined, require: true, maxLength: 32 },
    { name: 'nickname', title: '昵称', require: true, maxLength: 32 },
    { name: 'state', title: '状态', require: true, options: [...CommonStates], editType: 'button' },
    { name: 'phone', title: '手机号码', pattern: /^\d{8,11}$/ },
    { name: 'email', title: '电子邮箱', pattern: /^[\w.%+-]+@[a-z0-9.-]+\.[a-z]{2,}$/i },
  ],
})

const {
  submitQuery,
  queryFormData,
  QueryForm,
  Table,
  TableFieldFilterButton,
} = useTable<SystemAccountQuery, SystemAccount>({
  defaultQuery: { appType: 'MANAGE' },
  autoQuery: true,
  queryPage: accountApi.queryPage,
  queryFields: [
    { title: '应用', name: 'appType', dict: 'ENUM_APP_TYPE', require: true },
    { title: '类型', name: 'type', options: [...AccountTypes] },
    { title: '状态', name: 'state', options: [...CommonStates] },
    { title: 'ID', name: 'id' },
    { title: '用户名', name: 'username' },
    { title: '昵称', name: 'nickname' },
    { title: '手机号码', name: 'phone' },
    { title: '电子邮箱', name: 'email' },
  ],
  tableFields: [
    { title: '应用', name: 'appType', width: 100, sort: false, show: false, dict: 'ENUM_APP_TYPE' },
    { title: 'ID', name: 'id', width: 80, columnType: 'KEY', sort: true },
    { title: '用户名', name: 'username', width: 180, columnType: 'MAIN', sort: true, click: onEdit },
    { title: '昵称', name: 'nickname', width: 180 },
    { title: '类型', name: 'type', width: 90, options: [...AccountTypes] },
    { title: '状态', name: 'state', width: 90, options: [...CommonStates] },
    { title: '手机号码', name: 'phone', width: 180 },
    { title: '电子邮箱', name: 'email', width: 180 },
    { title: '注册时间', name: 'createTime', width: 180, show: false },
  ],
})

async function onEdit(data: SystemAccount) {
  openEditForm('编辑', await accountApi.findDetail(data.id), accountApi.modify)
}

const authDialog = ref<InstanceType<typeof AccountAuthDialog>>()
const pwdResetDialog = ref<InstanceType<typeof AccountPwdResetDialog>>()

const actions = reactive <Record<string, DataAction>>({
  create: {
    label: '新增',
    type: 'primary',
    authCode: 'system:account:create',
    click: () => openEditForm('新增', {
      appType: queryFormData.value?.appType,
      type: 'NORMAL',
      state: 'ENABLE',
    }, accountApi.create),
  },
  modify: {
    label: '编辑',
    type: 'primary',
    authCode: 'system:account:modify',
    click: onEdit,
  },
  changeState: {
    label: row => row.state === 'ENABLE' ? '禁用' : '启用',
    type: 'warning',
    authCode: 'system:account:modify',
    confirm: row => `是否${row.state === 'ENABLE' ? '禁用' : '启用'}账号`,
    click: data => accountApi.modify({ id: data.id, state: data.state === 'ENABLE' ? 'DISABLE' : 'ENABLE' }),
    success: () => submitQuery(),
    message: true,
  },
  remove: {
    label: '删除',
    type: 'danger',
    authCode: 'system:account:remove',
    confirm: '删除不可恢复，请谨慎确认',
    click: data => accountApi.remove(data.id),
    success: () => submitQuery(),
    message: true,
  },
  auth: {
    label: '权限',
    type: 'success',
    authCode: 'system:account:modify',
    show: row => row.type !== 'ADMIN',
    click: row => authDialog.value?.open(row.id),
  },
  resetPwd: {
    label: '重置密码',
    type: 'warning',
    authCode: 'system:account:resetPwd',
    click: row => pwdResetDialog.value?.open(row.id),
  },
  logout: {
    label: '注销',
    type: 'warning',
    authCode: 'system:account:logout',
    confirm: '注销后，账号将退出登录',
    click: data => accountApi.accountLogout(data.id),
  },
})
</script>

<template>
  <BaseCard title="查询条件">
    <QueryForm />
  </BaseCard>
  <BaseCard title="数据列表" class="mt-2">
    <template #buttons>
      <!-- 表格按钮 -->
      <data-button :action="actions.create" />
      <el-button :icon="Refresh" circle @click="submitQuery()" />
      <el-button :icon="FullScreen" circle />
      <TableFieldFilterButton />
    </template>
    <!-- 数据表格 -->
    <Table
      :row-actions="[
        actions.modify,
        actions.changeState,
        actions.auth,
        actions.resetPwd,
        actions.remove,
      ]"
    />
  </BaseCard>

  <!-- 数据编辑 -->
  <EditFormDrawer @success="(title:string) => submitQuery(title === '新增' ? 1 : undefined)" />

  <!-- 重置密码弹框 -->
  <AccountPwdResetDialog ref="pwdResetDialog" />
  <AccountAuthDialog ref="authDialog" />
</template>
